<template>
	<view class="nearby-oil-page">
		<!-- 可滚动内容区域 - 包含搜索栏、油品类型标签和卡片 -->
		<scroll-view class="scroll-container" scroll-y="true" :scroll-top="scrollTop" @scroll="onScroll">
			<!-- 顶部搜索栏和模式切换按钮 -->
			<view class="top-bar">
				<view class="search-box">
					<input type="text" placeholder="输入需要搜索的内容" />
					<button class="search-btn">
						<image src="/static/images/wgh/搜索.png" class="search-icon" mode="aspectFit" />
					</button>
				</view>
				<view class="mode-btn" @click="toggleMode">
					<text>{{ isMapMode ? '列表\n模式' : '地图\n模式' }}</text>
				</view>
			</view>

			<!-- 油品类型标签栏 -->
			<view class="oil-types" v-if="!isMapMode">
				<button class="oil-type">90#</button>
				<button class="oil-type">92#</button>
				<button class="oil-type">93#</button>
				<button class="oil-type">95#</button>
				<button class="oil-type">97#</button>
				<button class="oil-type">98#</button>
			</view>

			<!-- 内容区域：列表模式 -->
			<view class="station-list" v-if="!isMapMode">
				<view class="station-item" v-for="(station, index) in stations" :key="index" @click="goDetailPage(station)">
					<view class="station-header">
						<text class="station-name">{{ station.name }}</text>
						<text class="distance">{{ station.distance }}</text>
					</view>
					<view class="discount-tags">
						<text class="tag" v-for="(tag, tagIndex) in station.tags" :key="tagIndex">{{ tag }}</text>
					</view>
					<view class="station-info">
						<image :src="station.image" class="station-img" mode="aspectFill"></image>
						<view class="station-desc">
							<text class="business-hours">营业时间：{{ station.businessHours }}</text>
							<text class="price">¥{{ station.price }}/升</text>
							<text class="address">
								{{ station.address }}
								<image src="/static/images/wgh/plane.png" class="navigate-icon"
									@click.stop="goNavigateWithStation(station)"></image>
							</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 内容区域：地图模式 -->
			<view class="map-mode" v-else>
				<!-- 加油站信息和按钮区域 -->
				<view class="map-station-info">
					<!-- 地图区域 -->
					<map style="width: 100%; height: 850rpx;" :latitude="center.latitude" :longitude="center.longitude"
						:scale="scale" :show-location="true" :markers="markers" @markertap="onMarkerTap">
					</map>
					<view class="info-row">
						<view class="text-info">
							<text class="map-station-name">{{ mapStation.name }}</text>
							<text class="map-station-address">{{ mapStation.address }}</text>
							<button class="store-detail-btn" @click="goDetailPage()">
								<uni-icons class="map_icon" type="info" size="20" color="#2b79f5"></uni-icons>
								<text class="map_text">门店详情>></text>
							</button>
						</view>
						<image :src="mapStation.image" class="station-thumbnail" mode="aspectFill"></image>
					</view>
					<button class="navigate-btn" @click="goNavigatePage()">立即导航</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 页面模式控制
				isMapMode: false,
				// 滚动相关数据
				scrollTop: 0,
				// 地图相关数据
				center: {
					latitude: 35.240,
					longitude: 113.290
				},
				scale: 16,
				markers: [],

				// 当前选中的加油站信息
				mapStation: {
					name: '中国石化加油站',
					address: '河南省新乡市红旗区',
					image: '/static/images/wgh/中国石化.png'
				},

				// 加油站列表数据
				stations: [{
						name: '中国石化加油站',
						distance: '1.2km',
						tags: ['满200减20', '新用户优惠'],
						image: '/static/images/wgh/中国石化.png',
						businessHours: '24小时营业',
						price: '7.85',
						address: '河南省新乡市红旗区',
						latitude: 35.240,
						longitude: 113.290
					},
					{
						name: '中国石油加油站',
						distance: '2.5km',
						tags: ['满300减30', '会员优惠'],
						image: '/static/images/wgh/中国石油.png',
						businessHours: '06:00-22:00',
						price: '7.82',
						address: '河南省新乡市牧野区',
						latitude: 35.250,
						longitude: 113.300
					}
				]
			};
		},
		onLoad() {
			this.initMarkers();
		},
		methods: {
			// 滚动事件处理
			onScroll(e) {
				// 可以在这里添加滚动相关的逻辑
				// 例如：滚动到顶部时显示某些元素等
			},

			// 初始化地图标记
			initMarkers() {
				this.markers = this.stations.map((station, index) => ({
					id: index,
					latitude: station.latitude,
					longitude: station.longitude,
					width: 30,
					height: 30,
					iconPath: station.image,
					callout: {
						content: station.name,
						display: 'ALWAYS',
						fontSize: 12,
						color: '#333',
						padding: 6,
						borderRadius: 6
					}
				}));
			},

			// 切换显示模式
			toggleMode() {
				this.isMapMode = !this.isMapMode;
			},

			// 地图标记点击事件
			onMarkerTap(e) {
				const markerId = e.detail.markerId;
				const station = this.stations[markerId];
				if (station) {
					this.mapStation = {
						name: station.name,
						address: station.address,
						image: station.image
					};
				}
			},

			// 列表模式：点击加油站跳转到导航页
			goNavigateWithStation(station) {
				const stationData = {
					name: station.name,
					address: station.address,
					latitude: station.latitude,
					longitude: station.longitude,
					image: station.image
				};

				try {
					uni.setStorageSync('selectedStation', stationData);
				} catch (e) {}

				uni.navigateTo({
					url: '/pages/refuelNearby/navigate/navigate'
				});
			},


			// 地图模式：跳转到导航页
			goNavigatePage() {
				// 根据当前选中的加油站名称找到对应的坐标
				const selectedStation = this.stations.find(station => station.name === this.mapStation.name);

				const stationData = {
					name: this.mapStation.name,
					address: this.mapStation.address,
					latitude: selectedStation ? selectedStation.latitude : this.center.latitude,
					longitude: selectedStation ? selectedStation.longitude : this.center.longitude,
					image: this.mapStation.image
				};

				try {
					uni.setStorageSync('selectedStation', stationData);
				} catch (e) {}

				uni.navigateTo({
					url: '/pages/refuelNearby/navigate/navigate'
				});
			},

			// 跳转到门店详情页
			goDetailPage(station = null) {
				let stationData;

				if (station) {
					// 列表模式：使用传入的station参数
					stationData = {
						name: station.name,
						address: station.address,
						latitude: station.latitude,
						longitude: station.longitude,
						image: station.image
					};
				} else {
					// 地图模式：根据当前选中的加油站名称找到对应的坐标
					const selectedStation = this.stations.find(s => s.name === this.mapStation.name);
					stationData = {
						name: this.mapStation.name,
						address: this.mapStation.address,
						latitude: selectedStation ? selectedStation.latitude : this.center.latitude,
						longitude: selectedStation ? selectedStation.longitude : this.center.longitude,
						image: this.mapStation.image
					};
				}

				try {
					uni.setStorageSync('selectedStation', stationData);
				} catch (e) {}

				uni.navigateTo({
					url: '/pages/refuelNearby/navResult/navResult'
				});
			}
		}
	};
</script>

<style scoped>
	.nearby-oil-page {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-image: linear-gradient(to bottom, #3486FD 0%, #0A64E7 350rpx, #f5f5f5 100rpx);
		background-repeat: no-repeat;
		width: 100%;
		box-sizing: border-box;
	}

	/* 滚动容器样式 */
	.scroll-container {
		flex: 1;
		height: 100vh;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	/* 顶部栏样式 */
	.top-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
	}

	.search-box {
		display: flex;
		align-items: center;
		flex: 1;
		background-color: #fff;
		border-radius: 40rpx;
		padding: 16rpx 30rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.search-box input {
		flex: 1;
		border: none;
		background-color: transparent;
		font-size: 28rpx;
		padding: 10rpx 0;
	}

	.search-btn {
		background-color: transparent;
		border: none;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40rpx;
		height: 40rpx;
	}

	.mode-btn {
		width: 120rpx;
		height: 120rpx;
		background: url('/static/images/wgh/组 5.png') no-repeat center;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 1.2;
		margin-left: 20rpx;
	}

	/* 油品类型标签样式 */
	.oil-types {
		display: flex;
		margin: 0;
		margin-bottom: 30rpx;
		gap: 10rpx;
	}

	.oil-type {
		width: 80rpx;
		height: 50rpx;
		background-color: #2b79f5;
		color: #fff;
		border: 1rpx solid #e5e5e5;
		border-radius: 10rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 列表模式样式 */
	.station-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
		width: 100%;
		box-sizing: border-box;
	}

	.station-item:active {
		background-color: #f8f9ff;
		transform: scale(0.98);
	}

	.station-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.station-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.distance {
		font-size: 26rpx;
		color: #666;
	}

	.discount-tags {
		display: flex;
		gap: 16rpx;
		margin-bottom: 24rpx;
		flex-wrap: wrap;
	}

	.tag {
		background-color: #fff0f0;
		color: #ff4d4f;
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
	}

	.station-info {
		display: flex;
		align-items: flex-start;
	}

	.station-img {
		width: 200rpx;
		height: 140rpx;
		border-radius: 8rpx;
		margin-right: 24rpx;
	}

	.station-desc {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.business-hours,
	.address {
		font-size: 24rpx;
		color: #666;
		line-height: 1.4;
	}

	.price {
		font-size: 16px;
		color: #f53f3f;
		font-weight: bold;
		margin: 6rpx 0;
	}

	.navigate-btn {
		background-color: transparent;
		margin-left: auto;
	}

	.navigate-icon {
		width: 24rpx;
		height: 24rpx;
		margin-left: 20rpx;
	}

	/* 地图模式样式 */
	.map-mode {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.map-station-info {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		width: 100%;
		box-sizing: border-box;
	}

	.info-row {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.text-info {
		flex: 1;
		margin-right: 30rpx;
	}

	.map-station-name {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 8px;
	}

	.map-station-address {
		font-size: 13px;
		color: #666;
		display: block;
	}

	.store-detail-btn {
		background-color: transparent;
		border: none;
		color: #2b79f5;
		font-size: 28rpx;
		padding: 0;
		text-align: left;
	}

	.store-detail-btn::after {
		border: none;
	}

	.map_icon {
		display: inline-block;
		vertical-align: middle;
	}

	.map_text {
		display: inline-block;
		vertical-align: middle;
		margin-left: 10rpx;
	}

	.station-thumbnail {
		width: 100px;
		height: 70px;
		border-radius: 4px;
	}

	.map-mode .navigate-btn {
		background-color: #2b79f5;
		color: #fff;
		border: none;
		border-radius: 80rpx;
		padding: 10px 0;
		width: 100%;
		font-size: 16px;
	}
</style>